﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App31"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModels="using:App31.ViewModels"
    xmlns:Converters="using:App31.Converters"
    x:Class="App31.MainPage"
    mc:Ignorable="d">

    <Page.Resources>
        <Converters:VisibleWhenTrue x:Key="VisibleWhenTrue"/>
    </Page.Resources>

    <Page.DataContext>
        <ViewModels:Locator/>
    </Page.DataContext>

    <Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
		DataContext="{Binding MainPageViewModel, Mode=OneWay}">
        <FlipView ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColor, Mode=TwoWay}" Margin="20">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="{Binding Brush}" />
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
        <ItemsControl ItemsSource="{Binding Colors}" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,50">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Style="{StaticResource TextBlockButtonStyle}" 
                            CommandParameter="{Binding}"
                            Command="{Binding DataContext.SelectCommand, ElementName=grid, Mode=OneWay}">
                        <Grid Height="30" Width="30" Margin="10,10">
                            <Ellipse Fill="Black" RenderTransformOrigin="0.5,0.5" Visibility="{Binding Selected, Converter={StaticResource VisibleWhenTrue}}" >
                                <Ellipse.RenderTransform>
                                    <CompositeTransform ScaleX="1.25" ScaleY="1.25"/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                            <Ellipse Fill="{Binding Brush}" Stroke="Black" />
                        </Grid>
                    </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Page>
